<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
					font-family: "微软雅黑";
					color: #222;
					margin: 0;
					padding: 0;
					width: 100%;
					height: 100%;
                }
               html{
               	height: 100%;
               	font-size: 62.5%;
               }
            .container{
            	width: 100%;
            	height: 100%;
            	position: relative;
            }
            .content{
            	width: 50rem;
            	height: 25rem;
            	position: absolute;
            	top: 50%;
            	left: 50%;
            	margin-left: -25rem;
            	margin-top: -12.5rem;
            	background: #FFFFFF;
            	box-shadow: 2px 2px 40px rgba(0,0,0,0.2);
            }
            .doule{
            	width: 100%;
            	height: 50%;
            }
            .top{
            	background:#00BCD4;
            	text-align:center;
            }
            .top>img{
            	margin-top: 6rem;
            }
            .bottom{
            	background: #EDECEC;
            }
            .logo{
            	text-align: center;
            }
            .logo h1{
            	letter-spacing: 2px;
            }
            .login-body{
            	width:100%;
            	height: auto;
            	margin: auto;
            }
            .content .login-body table{
            	font-size: 1.6rem;
            	line-height: 3rem;
            }
            .content .login-body table tr td:first-child{
            	font-weight: bold;
            	text-align: right;
            }
            .login-mesg{
            	width: 20rem;
            }
           
            .content .login-button{
            	text-align: center;
            	margin-top: 2rem;
            }
            .content .login-button .btn{
            	width: 6rem;
            	height: 3rem;
            	border: none;
            	outline: none;
            	cursor: pointer;
            	border-radius: 5px;
            }
            .content .login-button .btn:active{
            	transform: scale(0.95);
            }
            .content .login-button .login-btn{
            	background: #00BCD4;
            	color: #ffffff;
            	
            }
            .input-default{
				padding-left: 0.5rem;
				transition: all 0.30s ease-in-out;
				-webkit-transition: all 0.30s ease-in-out;
				-moz-transition: all 0.30s ease-in-out;
				border: #cdcdcd 1px solid;
				border-radius: 4px;
				outline: none;
			}
			.input-default:focus{
				 box-shadow: 0 0 10px rgba(0,0,0,0.4);
				-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
				-moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
			}
			.login-body table tr td{
				width: 12rem;
			}
			.login-body table tr td input{
				width: 96%;
				height: 2.5rem;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="doule top">
				<img src="images/ladybug.png"/>
			</div>
			<div class="doule bottom"></div>
			<div class="content">
				<div class="logo"><h1>小爬虫</h1></div>
				<div class="login-body">
					<table align="center">
						<tr>
							<td>用户名</td>
							<td colspan="2">
								<input class="input-default" type="text" placeholder="请输入用户名">
							</td>
						</tr>
						<tr>
							<td>密码</td>
							<td colspan="2"><input class="input-default" type="password" placeholder="请输入密码"></td>
						</tr>
						<tr>
							<td>验证码</td>
							<td><input class="code input-default" type="text" placeholder="请输入验证码"></td>
							<td><input class="code input-default" type="text" ></td>
						</tr>
					</table>
				</div>
				<div class="login-button">
					<button class="btn login-btn">登录</button>
					<button class="btn">取消</button>
				</div>
			</div>
		</div>
	</body>
</html>
